<!-- 选择纪念馆弹框 -->
<template>
	<popupCompVue
		v-model:show="memoryHallPopup.show"
		title="选择一个纪念馆"
		bgColor="#1E201F"
		fontColor="#fff"
		@closeCallback="close"
	>
		<view
			class="memorialList"
			:style="{ height: memoryHallPopup.memorialList.length == 0 ? '516rpx' : '900rpx' }"
		>
			<mescroll-uni
				:down="downOption"
				:up="upOption"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:height="memoryHallPopup.memorialList.length == 0 ? '516rpx' : '900rpx'"
			>
				<view v-if="memoryHallPopup.memorialList.length == 0" class="memory_empty">
					<image src="http://112.124.50.179:8888/imgs/home/poster_empty.png" mode=""></image>
					<view>无可选纪念馆哦</view>
				</view>
				<view v-else>
					<view class="memory" v-for="(item, index) in memoryHallPopup.memorialList">
						<view class="display_flex" v-for="(ele, i) in item.peopleList">
							<image :src="ele.imageUrl" mode=""></image>
							<view class="name singleLineOverflowHidden">{{ ele.name }}</view>
						</view>
						<image
							v-if="memoryHallPopup.choosedMemo.memorialId == item.memorialId"
							class="selectIcon"
							src="http://112.124.50.179:8888/imgs/home/selected.png"
							mode=""
						></image>
						<image
							v-else
							class="selectIcon"
							src="http://112.124.50.179:8888/imgs/home/no-select.png"
							mode=""
							@click="chooseMemory(item)"
						></image>
					</view>
				</view>
				<view style="height: 32rpx;width: 100%;"></view>
			</mescroll-uni>
		</view>
		<footerBtn
			v-if="memoryHallPopup.memorialList.length == 0"
			bgcColor="#1E201F"
			name="创建纪念馆"
			@clickBtn="goUrl('/subPages/home/memoryHall/index')"
		>
			<image
				class="add_memory_image"
				src="http://112.124.50.179:8888/imgs/home/add_memory.png"
				mode=""
			></image>
		</footerBtn>
		<footerBtn
			v-if="memoryHallPopup.memorialList.length != 0"
			bgcColor="#1E201F"
			name="确定"
			@clickBtn="confirmCall"
		></footerBtn>
	</popupCompVue>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watchEffect } from 'vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import footerBtn from '/components/footerBtn/index.vue';
import popupCompVue from '/components/popup/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false,
	empty: false
});
let latestId = ref(0);
onLoad(() => {});

const props = defineProps({
	show: Boolean,
	choosedMemo: {
		type: Object,
		default: {}
	}
});
const emits = defineEmits(['update:show', 'confirm']);

const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};
const upCallback = (mescroll) => {
	homeApi
		.getMemorialListApi({
			memorialType: 1,
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.memorialList || []; // 当前页数据
			if (latestId.value == 0) memoryHallPopup.memorialList = [];
			memoryHallPopup.memorialList = memoryHallPopup.memorialList.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].memorialId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

//纪念馆弹框
const memoryHallPopup = reactive({
	show: false,
	choosedMemo: {},
	memorialList: []
});

watchEffect(() => {
	memoryHallPopup.show = props.show;
	memoryHallPopup.choosedMemo = props.choosedMemo;

	if (props.show) {
		setTimeout(() => {
			latestId.value = 0;
			getMescroll().resetUpScroll();
		}, 1);
	}
});

/**
 * 纪念馆弹框-勾选纪念馆
 */
const chooseMemory = (item) => {
	memoryHallPopup.choosedMemo = item;
};

/**
 * 纪念馆弹框-点击确定
 */
const confirmCall = () => {
	emits('confirm', memoryHallPopup.choosedMemo);
	emits('update:show', false);
};

const close = ()=>{
	emits('update:show', false);
}
</script>

<style lang="scss" scoped>
.memorialList {
	margin: 40rpx 32rpx 0;
	height: 900rpx;

	.memory {
		width: 100%;
		height: 224rpx;
		background: linear-gradient( 200deg, rgba(41, 43, 42, 0.3) 0%, rgba(138, 145, 142, 0.3) 100%);
		border-radius: 8rpx;
		padding: 24rpx 16rpx 24rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	image {
		width: 132rpx;
		height: 176rpx;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		margin-right: 24rpx;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		width: 100rpx;
	}

	.selectIcon {
		width: 56rpx;
		height: 56rpx;
	}
}

.memory_empty {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 516rpx;
	box-sizing: border-box;

	image {
		width: 330rpx;
		height: 252rpx;
	}

	view {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 42rpx;
		margin-top: 32rpx;
	}
}

.add_memory_image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 4rpx;
}
</style>
